import React, { Component } from 'react';
import {Link, NavLink} from 'react-router-dom'

class NotFound extends Component {
  constructor() {
    super();
    this.state = {}
  }
  changePage(url) {
    // 编程式导航
    console.log(this.props);
    // go goBack goForward  push  replace 
    this.props.history.push(url)
  }
  render() {
    return (
      <div>
        <p>您输入的地址有误！</p>
        {/* 使用NavLink组件，可以在链接被激活时显示对应的class，也可以通过activeClassName指定激活时的class名字 */}
        {/* 路由组件和非路由组件：组件是否被<Route>包裹.非路由组件没有路由相关的属性和方法，需要通过withRouter处理 */}
        <NavLink exact to="/">返回首页</NavLink>
        <br />
        <NavLink to="/transition1" activeClassName="aaa">transition1</NavLink>
        <br />
        <NavLink to="/404" activeClassName="aaa">404</NavLink>
        <br />
        <NavLink to="/params?age=18&job=stu" activeClassName="aaa">页面传参</NavLink>
        <hr></hr>
        <button onClick={()=>this.changePage('/')}>返回首页</button>
        <button onClick={()=>this.changePage('/transition1')}>transition1</button>
        <button onClick={()=>this.changePage('/404')}>404</button>
        <button onClick={()=>this.changePage('/params?age=20&job=baozupo')}>页面传参</button>
      </div>
    );
  }
}

export default NotFound;
